import { defineContentScript } from 'wxt/sandbox';
import { erpHandler } from '../utils/erpHandler';
import { listenToListItemClicks } from '../utils/domtools';
import { handleChatDataUpdate } from '../utils/chatDataHandler';
import { getCurrentChatId } from '../utils/whatsappHandler';

console.log('ERP Content script is loading...');

// 获取并打印 WhatsApp Web 的 React 绑定数据
function printWhatsAppReactData() {
  console.log('尝试获取 WhatsApp Web React 绑定数据...');
  
  try {
    // 查找所有可能包含 React 实例的对象
    const reactInstances = [];
    
    // 检查 window 对象上的所有属性
    for (const key in window) {
      try {
        const obj = window[key];
        
        // 检查是否是 React 相关对象
        if (obj && typeof obj === 'object') {
          // 检查是否有 React 特有的属性
          if (
            (obj as any).React || 
            (obj as any).__REACT_DEVTOOLS_GLOBAL_HOOK__ || 
            ((obj as any).default && (obj as any).default.createElement) ||
            ((obj as any).createElement && (obj as any).Component)
          ) {
            reactInstances.push({ key, value: obj });
            console.log(`找到可能的 React 实例: ${key}`);
          }
          
          // 检查是否有 React 组件实例
          if ((obj as any)._reactInternalInstance || (obj as any)._reactInternals || (obj as any).__reactFiber) {
            reactInstances.push({ key, value: obj });
            console.log(`找到 React 组件实例: ${key}`);
          }
        }
      } catch (e) {
        // 忽略访问某些属性时可能出现的错误
      }
    }
    
    // 查找 React 根元素
    const possibleRootElements = document.querySelectorAll('[data-reactroot], [data-reactid]');
    if (possibleRootElements.length > 0) {
      console.log('找到 React 根元素:', possibleRootElements);
    }
    
    // 尝试获取 React 开发者工具钩子
    const devTools = (window as any).__REACT_DEVTOOLS_GLOBAL_HOOK__;
    if (devTools) {
      console.log('找到 React 开发者工具钩子:', devTools);
      
      // 获取所有 React 实例
      if (devTools.renderers && devTools.renderers.size > 0) {
        console.log('React 渲染器:', devTools.renderers);
      }
    }
    
    // 打印找到的所有 React 实例
    if (reactInstances.length > 0) {
      console.log('找到的所有 React 相关实例:', reactInstances);
    } else {
      console.log('未找到任何 React 实例');
    }
    
    // 尝试查找 WhatsApp 特有的全局对象
    const whatsappGlobals = [];
    for (const key in window) {
      try {
        if (
          key.includes('WhatsApp') || 
          key.includes('WA') || 
          key.includes('webpackChunk')
        ) {
          whatsappGlobals.push({ key, value: window[key] });
        }
      } catch (e) {
        // 忽略错误
      }
    }
    
    if (whatsappGlobals.length > 0) {
      console.log('找到的 WhatsApp 相关全局对象:', whatsappGlobals);
    }
    
    // 专门查找 WAWebAppWrapper.react 组件
    console.log('尝试查找 WAWebAppWrapper.react 组件...');
    
    // 遍历所有DOM元素查找React组件
    const allElements = document.querySelectorAll('*');
    for (let i = 0; i < allElements.length; i++) {
      const el = allElements[i];
      try {
        // 检查是否有React相关属性
        const fiber = (el as any)._reactFiber || 
                     (el as any)._reactInternalFiber || 
                     (el as any).__reactFiber;
        
        if (fiber) {
          // 查找组件名称
          let currentFiber = fiber;
          while (currentFiber) {
            const name = currentFiber.type?.displayName || currentFiber.type?.name;
            if (name && name.includes('WAWebAppWrapper')) {
              console.log('找到 WAWebAppWrapper 组件!', currentFiber);
              console.log('组件数据:', {
                props: currentFiber.memoizedProps,
                state: currentFiber.memoizedState
              });
              break;
            }
            currentFiber = currentFiber.return;
          }
        }
      } catch (e) {
        // 忽略错误
      }
    }
    
  } catch (error) {
    console.error('获取 WhatsApp Web React 数据时出错:', error);
  }
}

export default defineContentScript({
  matches: ['*://*.web.whatsapp.com/*'],
  main() {
    console.log('ERP content script loaded and running');
    
    let removeListItemClickListener: (() => void) | null = null;
    
    // 在DOM完全加载后添加监听器
    const setupListItemListener = async () => {
      // console.log('设置listitem点击事件监听器');
      
      // 如果已经有监听器，先移除
      if (removeListItemClickListener) {
        removeListItemClickListener();
      }
      
      // 注入 Fiber 脚本
      injectFiberScript();
      
      // 添加新的监听器
      removeListItemClickListener = listenToListItemClicks(async (event, element) => {
        console.log('检测到listitem点击事件:', {
          element,
          tagName: element.tagName,
          id: element.id,
          className: element.className,
          attributes: Array.from(element.attributes).map(attr => ({ name: attr.name, value: attr.value })),
          textContent: element.textContent?.trim(),
          children: Array.from(element.children).map(child => ({
            tagName: child.tagName,
            className: child.className
          }))
        });

        const chatId = getCurrentChatId();
        if (!chatId) {
          console.log('未能获取到聊天ID');
          return;
        }
        
        console.log('当前聊天ID:', chatId);
        
        // 使用新的处理函数处理聊天数据
        const data = await handleChatDataUpdate(chatId, true, {
          onStatusChange: (status) => {
            // 如果存在全局更新函数，则调用它
            if (window.updateGlobalInfo && typeof window.updateGlobalInfo === 'function') {
              try {
                (window.updateGlobalInfo as Function)(status);
                console.log('已调用全局更新函数更新状态:', status);
              } catch (error) {
                console.error('调用全局更新函数出错:', error);
              }
            }
          },
          onShowModifyInfo: (chatId) => {
            // 触发修改信息事件
            const event = new CustomEvent('modify-info-button-clicked', {
              detail: { chatId }
            });
            window.dispatchEvent(event);
          },
          onShowAiReply: (data) => {
            // 触发AI回复提醒事件
            const event = new CustomEvent('ai-reply-alert', {
              detail: { 
                chatId,
                data 
              }
            });
            window.dispatchEvent(event);
          },
          onError: (message) => {
            console.error(message);
            // 可以在这里添加错误提示UI
          }
        });
        
        if (data) {
          console.log('聊天数据处理完成:', data);
        }
      });
    };
    
    // 在DOM加载完成后设置监听器
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', setupListItemListener);
    } else {
      // 如果DOM已经加载完成，立即设置监听器
      setupListItemListener();
    }
    
    // 监听DOM变化，处理动态添加的元素
    const observeDOM = () => {
      console.log('开始观察DOM变化');
      const observer = new MutationObserver((mutations) => {
        // 检查是否有新的listitem元素被添加到对话列表中
        const hasNewListItems = mutations.some(mutation => {
          if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
            // 检查变化是否发生在对话列表内
            const targetNode = mutation.target as Node;
            if (!targetNode || targetNode.nodeType !== Node.ELEMENT_NODE) {
              return false;
            }
            
            let currentElement = targetNode as HTMLElement;
            let isInChatList = false;
            
            // 检查变化的目标节点是否在对话列表中
            while (currentElement && currentElement !== document.body) {
              if (currentElement.getAttribute('aria-label') === '对话列表') {
                isInChatList = true;
                break;
              }
              
              const parent = currentElement.parentElement;
              if (!parent) break;
              currentElement = parent;
            }
            
            // 如果不在对话列表中，忽略这个变化
            if (!isInChatList) {
              return false;
            }
            
            // 检查添加的节点是否包含listitem
            return Array.from(mutation.addedNodes).some(node => {
              if (node.nodeType === Node.ELEMENT_NODE) {
                const element = node as HTMLElement;
                // 检查元素本身是否是listitem
                if (element.getAttribute('role') === 'listitem') {
                  return true;
                }
                // 检查元素内部是否包含listitem
                return element.querySelectorAll('[role="listitem"]').length > 0;
              }
              return false;
            });
          }
          return false;
        });
        
        // 如果有新的listitem元素，重新设置监听器
        if (hasNewListItems) {
          // console.log('检测到对话列表中有新的listitem元素，重新设置监听器, 执行getalllistelements');
          setupListItemListener();
  
        }
      });
      
      // 尝试找到对话列表元素
      const chatListElement = document.querySelector('div[aria-label="对话列表"]');
      
      if (chatListElement) {
        // 如果找到了对话列表元素，只观察这个元素
        // console.log('找到对话列表元素，开始观察');
        observer.observe(chatListElement, {
          childList: true,
          subtree: true
        });
      } else {
        // 如果没有找到对话列表元素，观察整个body
        console.log('未找到对话列表元素，观察整个body');
        observer.observe(document.body, {
          childList: true,
          subtree: true
        });
        
        // 设置一个定时器，定期检查对话列表元素是否出现
        const checkInterval = setInterval(() => {
          const chatList = document.querySelector('div[aria-label="对话列表"]');
          if (chatList) {
            console.log('找到对话列表元素，重新设置观察器');
            // 停止观察body
            observer.disconnect();
            // 开始观察对话列表
            observer.observe(chatList, {
              childList: true,
              subtree: true
            });
            // 清除定时器
            clearInterval(checkInterval);
          }
        }, 1000); // 每秒检查一次
        
        // 返回一个函数，用于清理定时器和断开观察器
        return () => {
          clearInterval(checkInterval);
          observer.disconnect();
        };
      }
      
      return () => observer.disconnect();
    };
    
    // 在DOM加载完成后开始观察
    let disconnectObserver: (() => void) | null = null;
    if (document.readyState === 'loading') {
      document.addEventListener('DOMContentLoaded', () => {
        disconnectObserver = observeDOM();
      });
    } else {
      disconnectObserver = observeDOM();
    }
    
    // 如果是 WhatsApp Web，打印 React 绑定数据
    if (window.location.href.includes('web.whatsapp.com')) {
      console.log('检测到 WhatsApp Web 页面，准备获取 React 数据');
      
      // 立即尝试获取一次
      printWhatsAppReactData();
      
      // 页面完全加载后再次尝试
      window.addEventListener('load', () => {
        console.log('WhatsApp Web 页面完全加载，再次尝试获取 React 数据');
        setTimeout(printWhatsAppReactData, 2000); // 延迟 2 秒再次尝试
      });
    }
    
    // 调用 erpHandler 函数，获取清理函数
    const cleanup = erpHandler();
    
    // 添加初始化代码
    document.addEventListener('DOMContentLoaded', () => {
      console.log('ERP DOM fully loaded');
    });
    
    // 返回清理函数，在内容脚本卸载时调用
    return () => {
      console.log('ERP content script unloading, cleaning up...');
      // 移除listitem点击事件监听器
      if (removeListItemClickListener) {
        removeListItemClickListener();
      }
      // 停止DOM观察
      if (disconnectObserver) {
        disconnectObserver();
      }
      // 执行其他清理操作
      cleanup();
    };
  },
});
